import { setTextToLink } from '../utils.js'

const code = `{
    // 绑定给el-dialog的属性，默认为{ title: this.isUpdate ? '编辑' : '创建', width: '650px' }
    dialogAttrs: {
      title: 'xxx'
    },

    // 绑定给el-form的属性
    formAttrs: {
      labelWidth：'150px'
    },
    
    // 弹框隐藏回调，第1个参数表示是否为编辑，第2个参数为表格行数据
    onHide(isUpdate, row) {},

    // 弹框显示回调，参数同上
    onShow(isUpdate, row) {},

    // 同VForm的items配置，详见VForm文档
    // 只有items配置中的show方法不同于VForm，show方法会加入第二个参数isUpdate判断是新增还是编辑
    // 如：{ show: (params, isUpdate) => !isUpdate }
    items: [],
    
    // 在执行新增或者编辑方法前，转化将要提交的参数，支持异步
    async transformParams(params) {
      params.name = '前缀' + params.name
      return Promise.resolve(params)
    },

    // 编辑的方法，第一个参数为将要提交的参数，第二个参数为表格行数据
    // 不提供的话不显示编辑按钮
    async update(params, row) {
      params.id = row.id
      return updateDataApi(params)
    },

    // 新增的方法,第一个参数为将要提交的参数
    // 不提供的话不显示新增按钮
    async create(params) {
      return createDataApi(params)
    }
}`


export const CreateAndUpdateConfigDesc = {
  template: `
  <el-card header="createAndUpdateConfig 对象结构" id="CreateAndUpdateConfigDesc">
    <pre>
      <code>{{ code }}</code>
    </pre>
  </el-card>
  `,

  data() {
    return {
      code
    }
  },

  mounted() {
    this.$nextTick(() => {
      setTextToLink(this.$el, 'hljs-comment', 'VForm文档', './v-form.html')
    })
  }
}